<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>PAC-run</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<link rel="apple-touch-icon" sizes="76x76" href="/static/img/apple-icon.png" />
	<link rel="icon" type="image/png" href="/static/img/favicon.png" />

	<!--     Fonts and icons     -->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

	<!-- CSS Files -->
	<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/static/css/material-bootstrap-wizard.css" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="/static/css/demo.css" rel="stylesheet" />

	<style type="text/css">
		.wizard-header{
			padding: 0;
		}
		.input-group{
			width: 100%;
		}
		.made-with-mk{
			width: 91px;
			bottom: 0px;
			top: 10px;
		}

	</style>
</head>

<body>
	<!-- <div class="image-container set-full-height" style="height: 645px; background-image: url('/static/img/wizard-book.jpg');"> -->
	<div class="">
	    <!--   Creative Tim Branding   -->
	    <a href="#" id='logo_a'>
	         <div class="logo-container">
	            <div class="logo">
	                <img src="/static/img/new_logo.png">
	            </div>
	            <div class="brand">{{ user.username }}</div>
	        </div>
	    </a>

	    <!--  Made With Material Kit
	    <a href="{% url 'password_change' %}?next={{ request.path }}" class="made-with-mk">
	    	<div class="brand">修改密码</div>
	    </a>
			-->
	    <!--  Made With Material Kit -->
	    <a href="{% url 'logout' %}?next={{ request.path }}" class="made-with-mk">
	    	<div class="brand">注销登录</div>
	    </a>

	    <!--   Big container   -->
	    <div class="container">
	        <div class="row">
		        <div class="col-sm-8 col-sm-offset-2" style="margin: 0 auto; width: 100%;">
		            <!--      Wizard container        -->
		            <div class="wizard-container" style="margin: 0 auto; width: 1024px; padding-top: 50px;">
		                <div class="card wizard-card" data-color="red" id="wizard" style="height: 537px;">
		                    <form action="/addSB/" method="POST">
		                <!--        You can switch " data-color="blue" "  with one of the next bright colors: "green", "orange", "red", "purple"             -->

		                    	<div class="wizard-header" style="padding: 0;">
		                        	<h3 class="wizard-title">
		                        		检索网站更新
		                        	</h3>
									<h6>爬虫检索各个网站更新数据（指定时间范围，默认当天）<a href="#">使用帮助</a></h6>
		                    	</div>
								<div class="wizard-navigation">
									<ul>
			                            <li><a style="font-weight: 600;" href="#details" data-toggle="tab">检索限制</a></li>
			                            <!-- <li><a style="font-weight: 600;" href="#captain" data-toggle="tab">检索预览</a></li> -->
			                            <!-- <li><a style="font-weight: 600;" href="#description" data-toggle="tab">定位详情页数据</a></li> -->
			                            <li><a style="font-weight: 600;" href="#lookOK" data-toggle="tab">检索结果</a></li>
			                        </ul>
								</div>

		                        <div class="tab-content" style="height: 345px;">
		                            <div class="tab-pane" id="details">
		                            	<div class="row">
		                                	<div class="col-sm-4" style="">
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">地区</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="area">
		                                            	<option selected="selected">all</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">省份</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="province">
		                                            	<option selected="selected">all</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">城市</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="city">
		                                            	<option selected="selected">all</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>
		                                	</div>
		                                	<div class="col-sm-4" style="">
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">业务模块</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="service_type">
		                                            	<option selected="selected">对外招标</option>
		                                            	<option disabled="disabled">实地控股</option>
		                                            	<option disabled="disabled">其他</option>
		                                            	<option disabled="disabled">+</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">指定标签</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="tags">
		                                            	<option selected="selected">all</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>
		                                	</div>
		                                    <div class="col-sm-4">
												<div class="input-group">
													<div class="form-group label-floating">
			                                          	<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开始时间</label>
			                                          	<input name="b_date" type="date" class="form-control">
			                                        </div>
												</div>
												<div class="input-group">
													<div class="form-group label-floating">
			                                          	<label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束时间</label>
			                                          	<input name="e_date" type="date" class="form-control">
			                                        </div>
												</div>
		                                    </div>
		                                </div>

		                                <div class="" style="margin-top: 13px;">
		                                	<!-- <input type='button' class='btn btn-fill btn-danger btn-wd jsjy' name='run_test' value='开始检索' style="top: 81px;left: 852px;" /> -->
		                                	<button type='button' class='btn btn-fill btn-danger btn-wd jsjy' name='run_test' tag="开始检索" style="top: 81px;left: 852px;" >开始检索</button>
		                                </div>
		                            </div>
		                            <div class="tab-pane" id="captain">
    	                                <div class="row" style="height:300px;">
    	                                    <div class="col-sm-3">
    	                                    	<div class="form-group" style="margin: 0;">
    	                                            <label class="control-label"><b>标签1</b></label>
    	                                            <div style="margin-left: 20px;">华中地区限制</div>

    	                                            <label class="control-label"><b>标签2</b></label>
    	                                            <div style="margin-left: 20px;">广州限制</div>

    	                                        </div>
    	                                    </div>
    	                                    <div class="col-sm-9">
                                                <label ><b>检索记录</b></label>
    		                                    <div class="paged_list" style="max-height:300px;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">
    		                                    	<div>
    			                                    	1-<a href="#">title1</a>
    		                                        </div>
    		                                    	<div>
    			                                    	2-<a href="#">title2</a>
    		                                        </div>
    		                                    	<div>
    			                                    	3-<a href="#">title3</a>
    		                                        </div>
    		                                    	<div>
    			                                    	4-<a href="#">title4</a>
    		                                        </div>
    		                                    	<div>
    			                                    	5-<a href="#">title5</a>
    		                                        </div>
    		                                    	<div>
    			                                    	6-<a href="#">title6</a>
    		                                        </div>
    		                                    	<div>
    			                                    	7-<a href="#">title7</a>
    		                                        </div>
    		                                    	<div>
    			                                    	8-<a href="#">title8</a>
    		                                        </div>
    		                                    	<div>
    			                                    	9-<a href="#">title9</a>
    		                                        </div>
    		                                    </div>
    	                                    </div>
    	                                </div>

		                            </div>
		                            <div class="tab-pane" id="description">
	                                	<div class="row">
		                                	<div class="col-sm-6" style="">
			                                	<div class="form-group label-floating">
		                                        	<label class="control-label">批次</label>
		                                        	<select class="form-control valid" aria-invalid="false" name="cpage_type">
		                                            	<option disabled="" selected=""></option>
		                                            	<option>1</option>
		                                            	<option>2</option>
		                                            	<option>3</option>
		                                            	<option>4</option>
		                                            	<option>5</option>
		                                            	<option>6</option>
		                                        	</select>
		                                    		<span class="material-input"></span>
		                                    	</div>

    		                                    <div class="label-floating">
		                                    		<label>解析列表</label>
    			                                    <div class="page_list_reader" style="max-height:120px;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">
    			                                    	<div>
    				                                    	1-<a href="#">title1</a>
    			                                        </div>
    			                                    	<div>
    				                                    	2-<a href="#">title2</a>
    			                                        </div>
    			                                    	<div>
    				                                    	3-<a href="#">title3</a>
    			                                        </div>
    			                                    	<div>
    				                                    	4-<a href="#">title4</a>
    			                                        </div>
    			                                    </div>
    		                                    </div>
		                                	</div>
	                                    	<div class="col-sm-6" style="">
	    										<div class="input-group">
	    											<div class="form-group label-floating">
	    	                                          	<label class="control-label">解析类型</label>
	    	                                          	<input name="cresolve_type" type="text" class="form-control">
	    	                                        </div>
	    										</div>
	    										<div class="input-group">
	    											<div class="form-group label-floating">
	    	                                          	<label class="control-label">解析规则</label>
	    	                                          	<input name="cresolve_rule" type="text" class="form-control">
	    	                                        </div>
	    										</div>
	    										<div class="input-group">
	    											<div class="form-group label-floating">
	    	                                          	<label class="control-label">解析源数据</label>
	    	                                          	<input name="cresolve_source" type="text" class="form-control">
	    	                                        </div>
	    										</div>

	                                    	</div>
	                                	</div>

	                                	<div class="" style="margin-top: 13px;">
	                                	  	<div class="testMSGF2" style="width: 667px;height: 130px;border: #D2D2D2 1px solid;float: left;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">testMSG-测试数据显示:
	                                	  	</div>
	                                		<input type='button' class='btn btn-fill btn-danger btn-wd' name='ceshiPage' value='测试' style="top: 81px;" />
	                                	</div>

		                            </div>
		                            <div class="tab-pane" id="lookOK">
		                                <div class="row" style="height: 300px;">
		                                    <div class="col-sm-3">
		                                    	<div class="form-group" style="margin: 0;">
		                                            <label class="control-label"><b>检索结果</b></label>
		                                            <div style="margin-left: 20px;">
			                                            <p name="gx_count">共有更新 {x} 条</p>
			                                            <p name="zx_count">最新 {x} 条</p>
		                                            </div>
		                                        </div>
		                                    </div>
		                                    <div class="col-sm-9">
	                                            <label ><b>最新数据</b></label>
	                                            <label id="cxjs" style="float: right;cursor:pointer;color: red;"><b>重新检索</b></label>
			                                    <div class="new_page_list" style="max-height:300px;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;border-top-left-radius: 6px;border-top: #F5F4F3 1px solid;border-left: #F5F4F3 1px solid;">
			                                    </div>
		                                    </div>
		                                </div>

    	                                <div style="margin-top: 55px;width: 500px;">
    	                                	<!-- <label class="control-label"><b><p name="look_pl_pass"></p></b></label> -->
    	                                	<div id="look_pl_pass" class="progress progress-striped">
            							  		<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;background-color: #e54133;">
            							    	<span class="">100% http://</span>
	            							  	</div>
	            							</div>

    	                                </div>
		                            </div>
		                        </div>
	                        	<div class="wizard-footer">
	                            	<div class="pull-right">
	                                    <!-- <input type='button' class='btn btn-next btn-fill btn-danger btn-wd' name='next' value='开始检索' />
	                                    <input type='submit' class='btn btn-next btn-fill btn-danger btn-wd jsjy' name='finish' value='更新检索' /> -->
	                                    <button type='button' class='btn btn-finish btn-fill btn-danger btn-wd jsjy' name='run_test' tag="更新检索">更新检索</button>
	                                </div>
	                                <div class="pull-left">
	                                    <!-- <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='上一步' /> -->

	                                </div>
	                                <div class="clearfix"></div>
	                        	</div>
		                    </form>
		                </div>
		            </div> <!-- wizard container -->
		        </div>
	    	</div> <!-- row -->
		</div> <!--  big container -->

	    <div class="footer" style="margin-top: 30px;">
	        <!-- <div class="container text-center">
	             made with <i class="fa fa-heart heart"></i> by <a href="#">CongWT</a>
	        </div> -->
	    </div>
	</div>

</body>
	<!--   Core JS Files   -->
	<script src="/static/js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="/static/js/jquery.bootstrap.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="/static/js/material-bootstrap-wizard.js"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="/static/js/jquery.validate.min.js"></script>
	<script src="/static/js/util.js"></script>

	<script type="text/javascript">
		Array.prototype.quchong = function () { // 	去重函数
	        var temp = {}, len = this.length, llen = 0;
	        for (var i = 0; i < len; i++) {
	            var tmp = JSON.stringify(this[i]);
	            // var tmp = this[i];
	            if (!temp.hasOwnProperty(tmp)) {//hasOwnProperty用来判断一个对象是否有你给出名称的属性或对象
	                temp[tmp] = i;
	            }else{
	            	llen++;
	            	delete this[i];
	            }
	        }
	        this.length -= llen;
	        // len = 0;
	        // var tempArr = [];
	        // for (var t in temp) {
	        //     tempArr[len++] = JSON.parse(t);
	        // }
	        // return tempArr;
	    }

	</script>

	<script type="text/javascript">
		
		var run_test_dbo = [];
		var resolve_key = "";

		// 刷新检索记录列表
		$("a[href='#captain']").click(function(){return;
			function spl_pase(i,o){return '<div>'+ i + '-' + o['news_date']+ '-' +'<a target="_blank" href="'+o['url_source']+'">'+o['news_title'] +'</a></div>';}
			var showd_html = '';
			for (var i = 0; i < run_test_dbo.length; i++) {
				showd_html += spl_pase(i+1, run_test_dbo[i]);
			}
			$(".paged_list").html(showd_html);
		});


		// 刷新检索结果更新列表
		$("a[href='#lookOK']").click(function(){return;
			function spl_pase(i,o){return '<div>'+ i + '-' + o['news_date']+ '-' +'<a style="color: blue;" target="_blank" href="'+o['url_source']+'">'+o['news_title'] +'</a></div>';}
			var showd_html = '';
			var passc = 0;
			for (var i = 0; i < run_test_dbo.length; i++) {
				showd_html += spl_pase(i+1, run_test_dbo[i]);
				if(i > 5)passc=50;
			}
			$(".new_page_list").html(showd_html);
			// for(var namek in show_ldo){
			// 	var show_dom = $("p[name='look_pl_"+namek+"']");
			// 	show_dom.text(show_dom.text().replace('{x}', show_ldo[namek]));
			// }
		});

		function over_show(status, gx, zx) {
			if (status && status == 1) {
				$("p[name='gx_count']").html($("p[name='gx_count']").html().replace('{x}', gx));
				$("p[name='zx_count']").html($("p[name='zx_count']").html().replace('{x}', zx));
				$("#look_pl_pass div").attr('aria-valuenow', '100');
				$("#look_pl_pass div").width('100%');
				$("#look_pl_pass div span").html('100%');
				$("#look_pl_pass").removeClass('active');

			}else{
				$("p[name='gx_count']").html('共有更新 {x} 条');
				$("p[name='zx_count']").html('最新 {x} 条');
				$("#look_pl_pass div").attr('aria-valuenow', '50');
				$("#look_pl_pass div").width('50%');
				$("#look_pl_pass div span").html('50%');
				$("#look_pl_pass").addClass('active');
			}
		}

		var thtest_Interval = '';
		function jsjy(status, s) {
			var thtest = $("[class*='jsjy']");	
			if (status && status == 1) {
				thtest.attr('disabled', 'disabled');
				thtest.text(thtest.attr('tag')+'('+s+')');
				thtest_Interval = setInterval(function(){
					if(s < 0){
						thtest.text(thtest.attr('tag'));
						thtest.removeAttr('disabled');	
						clearInterval(thtest_Interval);
						return;
					}	
					thtest.text(thtest.attr('tag')+'('+s--+')');
				}, 1000);
			}else{
				thtest.text(thtest.attr('tag'));
				thtest.removeAttr('disabled');	
				clearInterval(thtest_Interval);
			}
		}
		var get_test_dbo_Interval_clearInterval = false;
		var hshowInterval = '';
		function hshow(){

			function paseNPL(i,o){
				var ndate = o['news_date']?o['news_date']:'<span color="red">no date</span>';

				return '<div>【'+ i + '】-【' + ndate + '】-' +'<a style="color: blue;" target="_blank" href="'+o['url_source']+'">'+o['news_title'] +'</a></div>';
			}
			var npl = $(".new_page_list");
			npl.html('');
			run_test_dbo.length = 0; // 清空显示的老数据
			var iic = 0;
			if(hshowInterval){
				clearInterval(hshowInterval);
			}
			hshowInterval = setInterval(function(){
				
				if(run_test_dbo.length > iic){
					var sdo = run_test_dbo[iic];
					console.info('run_test_dbo['+iic+']='+sdo);
					// npl.html(npl.html()+paseNPL(++iic,sdo));
					npl.append(paseNPL(++iic,sdo));
				}else if (get_test_dbo_Interval_clearInterval) {
					get_test_dbo_Interval_clearInterval = false;
					over_show(1, iic, iic);
					jsjy();
					clearInterval(hshowInterval);
				}
			}, 100);
		}

		var get_test_dbo_Interval = '';
		function get_test_dbo() {
			hshow();
			if(get_test_dbo_Interval){
				clearInterval(get_test_dbo_Interval);
			}
			setTimeout(function(){
			get_test_dbo_Interval = setInterval(function(){
				var runing = true;
				$.ajax({
					url:"/pac/txv/run/isdbo",
					data:{'resolve_key':resolve_key},
					type:"POST",
					dataType:"TEXT",
					success: function(rets1){
						console.info('isdbo='+ rets1);

						if(rets1 == 'runed'){ // 判断是否已爬取完毕
							runing = false;
						}
					}	
				});

				$.ajax({
					url:"/pac/txv/run/dbo",
					data:{'resolve_key':resolve_key},
					type:"POST",
					dataType:"TEXT",
					success: function(rets){
						console.info("run_test_dbo="+rets);
						if(!(rets == '' || rets == '{}' || rets == 'None')){
							rets = eval('('+rets+')');
							// run_test_dbo.push(...rets);
							for (var rk in rets) {
								run_test_dbo.push(...rets[rk]);
							}
							run_test_dbo.quchong(); // 去重
						}
						if(!runing){ // 判断是否已爬取完毕
							get_test_dbo_Interval_clearInterval = true;
							clearInterval(get_test_dbo_Interval);
						}
					}	
				});

			}, 2000);
			}, 5000);	
		}
		function run_test(data_db) {
			var self = $("#details input");
			for(var di=0; di < self.length;di++){
				data_db[self[di].name] = self[di].value;
			}
			$.ajax({
				url:"/pac/txv/run",
				data:data_db,
				type:"POST",
				dataType:"TEXT",
				success: function(rets){
					if(rets == '')return;
					resolve_key = rets
					console.info("resolve_key="+rets);
					get_test_dbo();
					$("a[href='#lookOK']").click();// 刷新检索结果更新列表
					over_show();
					jsjy(1,60);// 暂时禁用启动检索按钮
				}	
			});
			// body...
		}
	</script>

	<script type="text/javascript">

		$(function () {

			$("[href='#captain']").click();
			$("button[name='run_test']").click(function(){ run_test({});});
			$("#cxjs").click(function(){ run_test({'rerun':'true'});});
			// $("#details input[type='date']").attr('value',new Date());

			// test测试
			$("#logo_a").click(function(){
				alert('logo_a');
			});

		});
	</script>

</html>
